<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--//构造函数模式-->
<!--小明 今年18岁 性别男 有男朋友 男朋友会说话 说什么自己定-->
<!--//工厂模式-->
<!--造一辆车 出厂 （合格证/建议零售价/说明书）-->
<!--用面向对象写一个选项卡-->

<html>
<head>
    <style>
        #div1 input {background:#CCC;}
        #div1 .active {background:yellow;}
        #div1 div {width:200px; height:200px; background:#CCC; display:none;}
    </style>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <script>
        window.onload=function ()
        {
            var oDiv=document.getElementById('div1');
            var aBtn=oDiv.getElementsByTagName('input');
            var aDiv=oDiv.getElementsByTagName('div');
            var i=0;

            for(i=0;i<aBtn.length;i++)
            {
                aBtn[i].index=i;
                aBtn[i].onclick=function ()
                {
                    for(i=0;i<aBtn.length;i++)
                    {
                        aBtn[i].className='';
                        aDiv[i].style.display='none';
                    }
                    this.className='active';
                    aDiv[this.index].style.display='block';
                };
            }
        };
    </script>
</head>

<body>
<div id="div1">
    <input class="active" type="button" value="教育" />
    <input type="button" value="财经" />
    <input type="button" value="aaa" />
    <div style="display:block;">1asdfasdfds</div>
    <div>2xzcvxzcv</div>
    <div>5332342345</div>
</div>
</body>
</html>


</body>
</html>